<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">日报日期：</label>
            <el-date-picker
                style="width: 145px"
                v-model="searchForm.entryDate"
                format="YYYY-MM-DD"
                type="date"
                :size="'default'"
                @change="taskDateChange"
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleClick('add')"
            >新增</el-button>
        </div>
    </div>

    <el-table
        :data="tableData"
        style="width: 100%"
        id="inspectionTask"
    >
        <el-table-column
            prop="title"
            label="任务项"
        />
        <el-table-column
            prop="operationStep"
            label="操作步骤"
        />
        <el-table-column
            prop="stepResolve"
            label="步骤分解"
        />
        <el-table-column
            prop="username"
            label="操作人员"
        />
        <el-table-column
            prop="completedTime"
            label="完成时间"
        />

    </el-table>
    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
</template>

<script setup>
// utils
import taskHttp from "@/https/task.js";
import dataCenterHttp from "@/https/dataCenter.js";
import Storage from "@/utils/storage.js";
import moment from 'moment';
import {
    Delete,
    Edit,
    View
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

let searchForm = ref({
    depId: Storage.localGet("depId"),
    entryDate: moment().format('YYYY-MM-DD'),
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
// dict
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
let tableData = ref([]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 重置
const reset = async () => {
    searchForm.value.depId = Storage.localGet("depId")
    searchForm.value.entryDate = moment().format('YYYY-MM-DD')
    searchForm.value.pageNo = 1
    searchForm.value.pageSize = 10
    search()
}
// 查询
const search = async () => {
    const res = await dataCenterHttp.recordsCenterQueryProcessRecord(searchForm.value)
    console.log(res.data.data, 'res')
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}
onMounted(() => {
    search()
})
</script>